<template>
  <div style="padding: 10px">
    <d-select
      :options="options"
      v-model="selectValue"
      size="small"
      group
      :props="{ children: 'children', label: 'key' }"></d-select>

    <p>selectValue值：{{ selectValue }}</p>
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  const options = ref([
    {
      key: '第一组',
      children: [
        { key: '选项1', value: '1' },
        { key: '选项2', value: '2' },
        { key: '选项3', value: '3' }
      ]
    },
    {
      key: '第二组',
      children: [
        { key: '选项4', value: '4' },
        { key: '选项5', value: '5' },
        { key: '选项6', value: '6' }
      ]
    }
  ])
  const selectValue = ref('')
</script>

<style scoped></style>
